import { IDetailData, getArticlesDetailApi } from "@/apis/home";
import { NavBar } from "antd-mobile";
import { useEffect, useState } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";

const Detail = () => {
  const [searchParams] = useSearchParams();
  const art_id = searchParams.get("art_id");
  console.log("searchParams", searchParams.get("art_id"));
  const [details, setDetails] = useState<IDetailData | null>(null);

  useEffect(() => {
    const getData = async () => {
      const res = await getArticlesDetailApi(art_id!);
      console.log("res123", res.data);
      setDetails(res.data);
    };
    getData();
  }, [art_id]);
  const navigat = useNavigate();
  const backFun = () => {
    navigat(-1);
  };
  if (!details) {
    return <div>Loading...</div>;
  }
  return (
    <>
      <div>
        <div className="page-header">
          <NavBar onBack={backFun}>{details.title}</NavBar>
        </div>

        <div className="article-main">
          <div dangerouslySetInnerHTML={{ __html: details.content }}></div>
        </div>
      </div>
    </>
  );
};
export default Detail;
